<template>
  <div>
    <!-- <h3 ref="appH3">{{ msg }}</h3>
    <p ref="appP">这是一个段落</p>
    <button @click="handleGet">获取dom-操作dom</button>

    <hr /> -->
    <my-jack ref="jack"></my-jack>

    <hr />
    <button @click="getJack">父组件获取jack</button>
  </div>
</template>
<script>
// 获取dom元素
// document.querySelector：找的是整个document，不区分组件 （作用范围广，容易影响其他组件）
// ref 和 $refs：找的是整个组件，有查找范围（当前组件）  （作用范围小，只会获取当前组件内容）

// 步骤：
// 1. 给目标元素(组件) 加上 ref 属性
// 2. 通过 this.$refs.xxx 获取元素(组件)

import MyJack from './components/jack.vue'

export default {
  data() {
    return {
      msg: 'goodbye fangfang',
      age: 28
    }
  },

  methods: {
    // handleGet() {
    //   console.log(document.querySelectorAll('h3'))
    // }
    // handleGet() {
    //   // this.msg 自己的属性， this.$refs 内置的, 内置的为了做区分，防止重名，一般都会$开头
    //   console.log(this.$refs.appH3)
    //   console.log(this.$refs.appP)
    //   console.log(this)
    //   this.$refs.appH3.addEventListener('click', function () {
    //     console.log(1)
    //   })
    // }
    getJack() {
      // 通过 ref 和 $refs 拿到 组件之后，就可以访问到组件实例身上的属性和方法
      console.log(this.$refs.jack)
      // this.$refs.jack.dance()
      // this.$refs.jack.sing()
      // this.$refs.jack.age = this.age
      this.age = this.$refs.jack.age
      // console.log(this.$refs.jack.age)
    }
  },
  components: {
    MyJack
  },
  computed: {
    sum() {
      return 1
    }
  }
}
</script>

<style>
</style>